<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from '@/router';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll';
import { getReferrerInfo } from '@/api/user';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const statusBarH = ref(0);
const router = useRouter();
const info = ref({
  inviteCount: 0,
  todayInvite: 0,
  weekInvite: 0,
  yesterdayInvite: 0
});
const list = ref<any[]>([]);

const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: '',
  empty: {
    use: false
  }
});
const { mescrollInit, downCallback } = useMescroll();

const upCallback = async (mescroll: any) => {
  const payload: any = {
    page: mescroll.num,
    pageSize: mescroll.size
  };

  const res = await getReferrerInfo(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, res.data.count);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);

  info.value.inviteCount = res.data.inviteCount;
  info.value.todayInvite = res.data.todayInvite;
  info.value.weekInvite = res.data.weekInvite;
  info.value.yesterdayInvite = res.data.yesterdayInvite;
};

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <view class="invite-contain">
    <view class="invite-contain-bg"></view>
    <view class="invite-contain-view">
      <uni-nav-bar
        v-if="isWechat()"
        :border="false"
        :title="t('LAKey_inviteList')"
        backgroundColor="none"
        fixed
        left-icon="left"
        status-bar
        @click-left="router.back"
      />
      <view class="invite-contain-view-contain">
        <view class="invite-contain-view-contain-top">
          <image src="/static/distribution/invite_bg.png" />
          <view class="invite-contain-view-contain-top-cont">
            <view class="invite-contain-view-contain-top-cont-t">
              {{ t('LAKey_inviteNumber') }}
              <text>{{ info.inviteCount }}</text>
            </view>
            <view class="invite-contain-view-contain-top-cont-b">
              <view class="invite-contain-view-contain-top-cont-b-item">
                <view>{{ info.todayInvite }}</view>
                <view>{{ t('LAKey_todayInvite') }}</view>
              </view>
              <view class="invite-contain-view-contain-top-cont-b-item">
                <view>{{ info.yesterdayInvite }}</view>
                <view>{{ t('LAKey_yesterdayInvite') }}</view>
              </view>
              <view class="invite-contain-view-contain-top-cont-b-item">
                <view>{{ info.weekInvite }}</view>
                <view>{{ t('LAKey_thisWeekInvite') }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="invite-contain-view-contain-list">
          <view class="invite-contain-view-contain-list-top">
            <view class="invite-contain-view-contain-list-top-l">{{ t('LAKey_friendList') }}</view>
          </view>
          <view
            :style="{ height: 'calc(100vh - 44px - 444rpx - ' + statusBarH + 'px)' }"
            class="invite-contain-view-contain-list-contain"
          >
            <mescroll-uni
              ref="mescrollRef"
              :down="downOption"
              :fixed="false"
              :up="upOption"
              @down="downCallback"
              @init="mescrollInit"
              @up="upCallback"
            >
              <view
                v-for="(item, index) in list"
                v-if="list.length > 0"
                :key="index"
                class="invite-contain-view-contain-list-contain-item"
              >
                <view class="invite-contain-view-contain-list-contain-item-l">
                  <image
                    :src="
                      item.memberInfo.avatar
                        ? item.memberInfo.avatar
                        : '/static/user_avatar_default.png'
                    "
                  />
                  {{
                    item.memberInfo.fullName
                      ? item.memberInfo.fullName.replace(item.memberInfo.lastName, '**')
                      : ''
                  }}
                </view>
                <view class="invite-contain-view-contain-list-contain-item-r">
                  <view>{{ t('LAKey_friendBindTime') }}</view>
                  <view>{{ item.createdAt }}</view>
                </view>
              </view>
              <view v-else class="invite-contain-view-contain-list-contain-empty">
                <image src="/static/distribution/invite_empty.png" />
                <view>{{ t('LAKey_friendEmptyTips') }}</view>
              </view>
            </mescroll-uni>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.invite {
  &-contain {
    &-bg {
      width: 100%;
      height: 594rpx;
      background: linear-gradient(180deg, #e1faf2 0%, rgba(247, 255, 252, 0) 99%);
    }

    &-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &-contain {
        padding: 24rpx;

        &-top {
          position: relative;

          image {
            display: block;
            width: 100%;
            height: 316rpx;
          }

          &-cont {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            &-t {
              display: flex;
              align-items: center;
              padding-top: 40rpx;
              padding-left: 40rpx;
              padding-right: 40rpx;
              font-weight: 400;
              font-size: 28rpx;
              color: #ffffff;
              line-height: 52rpx;

              text {
                font-weight: 500;
                font-size: 48rpx;
                margin-left: 16rpx;
              }
            }

            &-b {
              display: flex;
              justify-content: space-between;
              padding: 70rpx 60rpx 50rpx;

              &-item {
                view {
                  &:first-child {
                    font-weight: 500;
                    font-size: 48rpx;
                    color: #ffffff;
                    line-height: 52rpx;
                    text-align: center;
                  }

                  &:last-child {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: rgba(255, 255, 255, 0.8);
                    line-height: 52rpx;
                    text-align: center;
                  }
                }
              }
            }
          }
        }

        &-list {
          &-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32rpx 0 20rpx;

            &-l {
              font-weight: 500;
              font-size: 36rpx;
              color: #3d3d3d;
              line-height: 52rpx;
            }
          }

          &-contain {
            &-item {
              background: #ffffff;
              margin-bottom: 20rpx;
              border-radius: 20rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 26rpx 24rpx;

              &-l {
                display: flex;
                align-items: center;

                image {
                  display: block;
                  width: 88rpx;
                  height: 88rpx;
                  border-radius: 100%;
                  margin-right: 16rpx;
                }

                font-weight: 500;
                font-size: 28rpx;
                color: #3d3d3d;
                line-height: 40rpx;
              }

              &-r {
                view {
                  &:first-child {
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #3d3d3d;
                    line-height: 28rpx;
                    text-align: right;
                  }

                  &:last-child {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #979797;
                    line-height: 34rpx;
                  }
                }
              }
            }

            &-empty {
              position: relative;

              image {
                display: block;
                width: 556rpx;
                height: 556rpx;
                margin: 0 auto;
              }

              view {
                text-align: center;
                font-size: 28rpx;
                color: #afafaf;
                line-height: 44rpx;
                font-weight: 400;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 84rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
